<template>
  <div class="flex-box" @click="goToUnclease">
    <h1></h1>
    <div class="qr-code" ref="qrCodeUrl"></div>
  </div>
</template>

<script>
import QRCode from 'qrcodejs2';

import {affirm} from "@/api/ucleictask/ucleictask.js";

export default {
  data() {
    return {
      id: "",
    };
  },
  methods: {
    /* 创建二维码 */
    creatQrCode(id) {
      new QRCode(this.$refs.qrCodeUrl, {
        text: '127.0.0.1:8088/affirm/'+id, // 二维码的内容
        width: 150,
        height: 150,
        colorDark: '#000',
        colorLight: '#fff',
        correctLevel: QRCode.CorrectLevel.H
      });
    },
    goToUnclease(){
      // window.open("localhost:/qrcode?id="+this.id);
      affirm(this.id).then(response=>{
        if (response.status){
          alert("扫码成功")
          window.open("localhost/login")
        }
      })
    }
  },
  mounted(){
    this.id = location.href.split("=")[1]
    this.creatQrCode(this.id); // 创建二维码
  }
};
</script>

<style scoped>
.flex-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}
.qr-code {
  padding: 10px;
  margin-top: 20px;
  background-color: #fff;
  border: 1px solid red;
}
</style>
